<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3 2D转换</title>
    <style>
        .menu ul {
            border-top: 15px solid black;
            padding: 0 10px;
            list-style: none;
        }
        
        .menu ul li:before {
            display: none;
        }
        
        .menu ul li a {
            color: #fff;
            float: left;
            margin: 0 2px;
            height: 50px;
            font-size: 12px;
            line-height: 50px;
            text-align: center;
            width: 75px;
            padding: 10px 0px;
            background: #151515;
            border-radius: 0 0 5px 5px;
            box-shadow: 0 0 1px #ccc, inset 0 0 2px #fff;
            text-decoration: none;
        }
        
        .menu ul li.translate a {
            background: #2EC7D2;
        }
        
        .menu ul li.translate-x a {
            background: #8FDD21;
        }
        
        .menu ul li.translate-y a {
            background: #F45917;
        }
        
        .menu ul li.rotate a {
            background: #D50E19;
        }
        
        .menu ul li.scale a {
            background: #cdddf2;
        }
        
        .menu ul li.scale-x a {
            background: #0fDD21;
        }
        
        .menu ul li.scale-y a {
            background: #cd5917;
        }
        
        .menu ul li.skew a {
            background: #519;
        }
        
        .menu ul li.skew-x a {
            background: #D50;
        }
        
        .menu ul li.skew-y a {
            background: #E19;
        }
        
        .menu ul li.matrix a {
            background: #919;
        }
        
        .menu ul li.translate a:hover {
            transform: translate(-10px, -10px);
        }
        
        .menu ul li.translate-x a:hover {
            transform: translateX(-10px);
        }
        
        .menu ul li.translate-y a:hover {
            transform: translateY(-10px);
        }
        
        .menu ul li.rotate a:hover {
            transform: rotate(45deg);
        }
        
        .menu ul li.scale a:hover {
            transform: scale(0.8, 0.8);
        }
        
        .menu ul li.scale-x a:hover {
            transform: scaleX(0.8);
        }
        
        .menu ul li.scale-y a:hover {
            transform: scaleY(1.2);
        }
        
        .menu ul li.skew a:hover {
            transform: skew(45deg, 15deg);
        }
        
        .menu ul li.skew-x a:hover {
            transform: skewX(-30deg);
        }
        
        .menu ul li.skew-y a:hover {
            transform: skewY(30deg);
        }
        
        .menu ul li.matrix a:hover {
            transform: matrix(1, 1, -1, 0, 0, 0);
        }

         .menu ul li.transform-origin a {
             transform-origin: left top;
         }
    </style>
</head>

<body>
    <div class="menu">
        <ul class="clearfix">
            <li class="item translate"><a href="#">Translate</a></li>
            <li class="item translate-x"><a href="#">TranslateX</a></li>
            <li class="item translate-y"><a href="#">TranslateY</a></li>
            <li class="item rotate"><a href="#">Rotate</a></li>
            <li class="item scale"><a href="#">Scale</a></li>
            <li class="item scale-x"><a href="#">ScaleX</a></li>
            <li class="item scale-y"><a href="#">ScaleY</a></li>
            <li class="item skew"><a href="#">Skew</a></li>
            <li class="item skew-x"><a href="#">SkewX</a></li>
            <li class="item skew-y"><a href="#">SkewY</a></li>
            <li class="item matrix"><a href="#">Matrix</a></li>
        </ul>
    </div>

    <p style="clear: both">transform-origin设置为左上角后</p>

    <div class="menu">
        <ul class="clearfix">
            <li class="item translate transform-origin"><a href="#">Translate</a></li>
            <li class="item translate-x transform-origin"><a href="#">TranslateX</a></li>
            <li class="item translate-y transform-origin"><a href="#">TranslateY</a></li>
            <li class="item rotate transform-origin"><a href="#">Rotate</a></li>
            <li class="item scale transform-origin"><a href="#">Scale</a></li>
            <li class="item scale-x transform-origin"><a href="#">ScaleX</a></li>
            <li class="item scale-y transform-origin"><a href="#">ScaleY</a></li>
            <li class="item skew transform-origin"><a href="#">Skew</a></li>
            <li class="item skew-x transform-origin"><a href="#">SkewX</a></li>
            <li class="item skew-y transform-origin"><a href="#">SkewY</a></li>
            <li class="item matrix transform-origin"><a href="#">Matrix</a></li>
        </ul>
    </div>
</body>

</html>